<template>
<div id="auth-tree">
    <div v-if="rid" class="auth-tree">
        <h3 class="auth-title">分配权限 - {{rid}}</h3>
        <div class="auth-layout">
            <div class="auth-one" v-for="one in authTree" :key="one.aid">
                <label :for="'menu-one'+one.aid" class="menu-one">
                    <input 
                        type="checkbox" 
                        :id="'menu-one'+one.aid" 
                        :value="one.aid"
                        v-model="checkedNames"
                    >
                    <span>{{one.authName}}</span>
                </label>
                <div class="auth-two" v-for="two in one.children" :key="two.aid">
                    <label :for="'menu-two'+two.aid" class="menu-two">
                        <input 
                            type="checkbox" 
                            :id="'menu-two'+two.aid" 
                            :value="two.aid"
                            v-model="checkedNames"
                        >
                        <span>{{two.authName}}</span>
                    </label>
                    <div class="auth-three" v-for="three in two.children" :key="three.aid">
                        <label :for="'menu-three'+three.aid" class="menu-three">
                            <input 
                                type="checkbox" 
                                :id="'menu-three'+three.aid" 
                                :value="three.aid" 
                                v-model="checkedNames"
                            >
                            <span>{{three.authName}}</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="auth-footer">
            <my-button
                :type="'back'"
                class="back"
                link
                :to="{name: 'roleList'}"
            >返回</my-button>
            <my-button
                :type="'save'"
                class="save"
                @click.native="handleClickSaveAuth"
            >保存设置</my-button>
        </div>
    </div>
    <div v-else class="auth-tree">
        <h3>参数不存在</h3>
        <router-link :to="{name: 'roleList'}">跳转到角色列表</router-link>
    </div>
</div>
</template>

<script>
import { authTree, saveAssignAuth } from '../../config/data'
import { messageTip } from '../JS'
export default {
    name: "assignAuth",
    props: ["rid", "role"],
    data() {
        return {
            authTree: [],
            checkedNames: []
        }
    },
    created() {
        this.getAuthTreeData()
        this.getRoleByRid()
    },
    methods: {
        async handleClickSaveAuth() {
            let result = await saveAssignAuth({
                rid: this.rid,
                authTree: this.checkedNames
            })
            if(result.fsBool) {
                setTimeout(_ => {
                    this.$router.push({name: "roleList"})
                }, 300)
            }
        },
        treeToList(tree=[]) {
            return tree.children?.reduce((pre, curr) => {
                let arr = []
                if(curr.children?.length > 0) {
                    arr = arr.concat(this.treeToList(curr))
                }
                pre.push({
                    aid: curr.aid,
                    authName: curr.authName,
                    path: curr.path,
                    authLevel: curr.authLevel,
                })
                return pre.concat(arr)
            }, [])
        },
        getRoleByRid() {
            let arr = this.treeToList(this.role)
            if(!arr) {
                setTimeout(_ => {
                    this.$router.push({name: "roleList"})
                }, 1000)
                return;
            }
            arr?.forEach(item => {
                this.checkedNames.push(item.aid)
            })
        },
        async getAuthTreeData() {
            let result = await authTree()
            this.authTree = result.data.authTree
        }
    }
}
</script>

<style scoped>
#auth-tree,
.auth-tree {
    height: 100%;
}
.auth-title {
    height: 50px;
    line-height: 50px;
}
.auth-layout {
    overflow-x: hidden;
    overflow-y: scroll;
    height: calc(100% - 50px - 50px);
}
.auth-layout::-webkit-scrollbar {
    display: none;
}
.menu-one,
.menu-two,
.menu-three {
    cursor: pointer;
}
.auth-one,
.auth-two,
.auth-three {
    padding: 6px 0 6px 24px;
}
.auth-footer {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
}
.auth-footer .back, 
.auth-footer .save {
    margin: 0 12px;
}
</style>